<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Clemo – Free HTML5 Multipurpose Portfolio Page Template</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="apple-touch-icon" href="apple-touch-icon.png">


        <!--Google fonts links-->
        <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">

        <link rel="stylesheet" href="assets/css/fonticons.css">
        <link rel="stylesheet" href="assets/css/slider-pro.css">
        <!--<link rel="stylesheet" href="assets/css/stylesheet.css">-->
        <link rel="stylesheet" href="assets/css/font-awesome.min.css">
        <link rel="stylesheet" href="assets/css/bootstrap.min.css">


        <!--For Plugins external css-->
        <link rel="stylesheet" href="assets/css/plugins.css" />

        <!--Theme custom css -->
        <link rel="stylesheet" href="assets/css/style.css">

        <!--Theme Responsive css-->
        <link rel="stylesheet" href="assets/css/responsive.css" />

        <script src="assets/js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
    </head>
    <body data-spy="scroll" data-target=".navbar-collapse">
        <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        <div class='preloader'><div class='loaded'>&nbsp;</div></div>
        <header id="main_menu" class="header navbar-fixed-top">            
            <div class="main_menu_bg">
                <div class="container">
                    <div class="row">
                        <div class="nave_menu">
                            <nav class="navbar navbar-default" id="navmenu">
                                <div class="container-fluid">
                                    <!-- Brand and toggle get grouped for better mobile display -->
                                    <div class="navbar-header">
                                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                                            <span class="sr-only">Toggle navigation</span>
                                            <span class="icon-bar"></span>
                                            <span class="icon-bar"></span>
                                            <span class="icon-bar"></span>
                                        </button>
                                        <a class="navbar-brand" href="index.html">
                                            <img src="assets/images/logo.png"/>
                                        </a>
                                    </div>

                                    <!-- Collect the nav links, forms, and other content for toggling -->



                                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                                        <ul class="nav navbar-nav navbar-right">
                                            <li><a href="aboutus.html">about us</a></li>
                                            <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true">services</a>
                                                <ul class="dropdown-menu">
                                                    <li><a href="service.html">service page</a></li>
                                                    <li><a href="service1.html">service page two</a></li>
                                                </ul>
                                            </li>
                                            <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true">works</a>
                                                <ul class="dropdown-menu">
                                                    <li><a href="work.html">work page</a></li>
                                                    <li><a href="work1.html">work page Two</a></li>
                                                </ul>
                                            </li>
                                            <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true">blog</a>
                                                <ul class="dropdown-menu">
                                                    <li><a href="blog.html">blog page</a></li>
                                                    <li><a href="bloginner.html">singleblog page</a></li>
                                                </ul>
                                            </li>
                                            <li><a href="contact.html">contact</a></li>
                                        </ul>    
                                    </div>

                                </div>
                            </nav>
                        </div>	
                    </div>

                </div>

            </div>
        </header> <!--End of header -->



        <!-- service1 Section -->
        <section id="service1" class="service1 margin-top-120">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="head_title text-center margin-top-80">
                            <h1>creative kitchen</h1>
                        </div><!-- End of head title -->

                        <div class="main_about_area"> 
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="signle_about_left">
                                        <img src="assets/images/service3.jpg" alt="" />
                                        <div class="single_about_left_text">
                                            <div class="separator2"></div>
                                            <h4>we create <br />
                                                the best projects<br />
                                                for the best<br />
                                                companies!</h4>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-sm-5 col-sm-push-1">
                                    <div class="single_about">
                                        <div class="separator2"></div>
                                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, 
                                            eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>

                                        <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, 
                                            sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>

                                        <p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
                                            totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!-- End of col-sm-12 -->
                </div><!-- End of row -->
            </div><!-- End of Container -->
            <hr />
        </section><!-- End of service1 Section -->


        <!-- counter Seection -->
        <section id="counter" class="counter">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="main_counter sections text-center">
                            <div class="row">
                                <div class="col-sm-4 col-xs-12">
                                    <div class="single_counter_right">
                                        <h4 class="statistic-counter">3,800</h4>
                                        <div class="separator"></div>
                                        <p>project complete</p>
                                    </div>
                                </div><!-- End of col-sm-4 -->

                                <div class="col-sm-4 col-xs-12">
                                    <div class="single_counter_right">
                                        <h4 class="statistic-counter">4510</h4>
                                        <div class="separator"></div>
                                        <p>happy clients</p>
                                    </div>
                                </div><!-- End of col-sm-4 -->

                                <div class="col-sm-4 col-xs-12">
                                    <div class="single_counter_right">
                                        <h4 class="statistic-counter">2,800</h4>
                                        <div class="separator"></div>
                                        <p>cups of milk</p>
                                    </div>
                                </div><!-- End of col-sm-4 -->

                            </div><!-- End of row -->
                        </div>
                    </div><!-- End of col-sm-12 -->
                </div><!-- End of row -->
            </div><!-- End of Container -->
        </section><!-- End of counter Section -->

        <section id="events" class="events blackbg">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="main_events_area padding-top-60 padding-bottom-60">
                            <div class="row">
                                <div class="col-sm-8">
                                    <div class="single_events text-center whitetext">
                                        <p> <span class="e_text">best price</span><span class="separator3"></span><span class="e_price">$ 999</span> <span class="e_text1">/ event</span></p>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="single_events events_btn text-center">
                                        <a href="" class="btn btn-default">get started</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Clients Section -->
        <section id="clients" class="clients sections">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="main_clients_area text-center">
                            <div class="head_title">
                                <h1>clients say’s</h1>
                            </div><!-- End of head title -->

                            <div id="example3" class="slider-pro">
                                <div class="sp-slides sps_slider">
                                    <div class="sp-slide">
                                        <div class="col-sm-12">
                                            <div class="row">
                                                <div class="col-sm-6 col-xs-6">
                                                    <div class="single_left_text text-right">
                                                        <h4 class="sp-layer" 
                                                            data-horizontal="right" data-vertical="0" data-width="81%"
                                                            data-show-transition="left" data-show-delay="200">
                                                            frank sims
                                                        </h4>

                                                        <div class="separator sp-layer sp-black" data-horizontal="340" data-vertical="70"></div>

                                                        <p class="sp-layer" 
                                                           data-horizontal="right" data-vertical="100" data-width="81%" 
                                                           data-show-transition="left" data-show-delay="400">
                                                            photographer
                                                        </p>

                                                    </div>
                                                </div><!-- End of col-sm-6 -->
                                                <div class="col-sm-6 col-xs-6">
                                                    <div class="single_right_text text-left">
                                                        <p class="sp-layer right_sp_layer" data-width="100%">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
                                                            totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
                                                    </div>
                                                </div><!-- End of col-sm-6 -->
                                            </div>
                                        </div><!-- End of col-sm-12 -->
                                    </div>
                                    <div class="sp-slide">
                                        <div class="col-sm-12">
                                            <div class="row">
                                                <div class="col-sm-6 col-xs-6">
                                                    <div class="single_left_text text-right">
                                                        <h4 class="sp-layer" 
                                                            data-horizontal="right" data-vertical="0" data-width="81%"
                                                            data-show-transition="left" data-show-delay="200">
                                                            frank sims
                                                        </h4>

                                                        <div class="separator sp-layer sp-black" data-horizontal="340" data-vertical="70"></div>

                                                        <p class="sp-layer" 
                                                           data-horizontal="right" data-vertical="100" data-width="81%" 
                                                           data-show-transition="left" data-show-delay="400">
                                                            photographer
                                                        </p>

                                                    </div>
                                                </div><!-- End of col-sm-6 -->
                                                <div class="col-sm-6 col-xs-6">
                                                    <div class="single_right_text text-left">
                                                        <p class="sp-layer right_sp_layer" data-width="100%">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
                                                            totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
                                                    </div>
                                                </div><!-- End of col-sm-6 -->
                                            </div>
                                        </div><!-- End of col-sm-12 -->
                                    </div>
                                    <div class="sp-slide">
                                        <div class="col-sm-12">
                                            <div class="row">
                                                <div class="col-sm-6 col-xs-6">
                                                    <div class="single_left_text text-right">
                                                        <h4 class="sp-layer" 
                                                            data-horizontal="right" data-vertical="0" data-width="81%"
                                                            data-show-transition="left" data-show-delay="200">
                                                            frank sims
                                                        </h4>

                                                        <div class="separator sp-layer sp-black" data-horizontal="340" data-vertical="70"></div>

                                                        <p class="sp-layer" 
                                                           data-horizontal="right" data-vertical="100" data-width="81%" 
                                                           data-show-transition="left" data-show-delay="400">
                                                            photographer
                                                        </p>

                                                    </div>
                                                </div><!-- End of col-sm-6 -->
                                                <div class="col-sm-6 col-xs-6">
                                                    <div class="single_right_text text-left">
                                                        <p class="sp-layer right_sp_layer" data-width="100%">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
                                                            totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
                                                    </div>
                                                </div><!-- End of col-sm-6 -->
                                            </div>
                                        </div><!-- End of col-sm-12 -->
                                    </div>
                                    <div class="sp-slide">
                                        <div class="col-sm-12">
                                            <div class="row">
                                                <div class="col-sm-6 col-xs-6">
                                                    <div class="single_left_text text-right">
                                                        <h4 class="sp-layer" 
                                                            data-horizontal="right" data-vertical="0" data-width="81%"
                                                            data-show-transition="left" data-show-delay="200">
                                                            frank sims
                                                        </h4>

                                                        <div class="separator sp-layer sp-black" data-horizontal="340" data-vertical="70"></div>

                                                        <p class="sp-layer" 
                                                           data-horizontal="right" data-vertical="100" data-width="81%" 
                                                           data-show-transition="left" data-show-delay="400">
                                                            photographer
                                                        </p>

                                                    </div>
                                                </div><!-- End of col-sm-6 -->
                                                <div class="col-sm-6 col-xs-6">
                                                    <div class="single_right_text text-left">
                                                        <p class="sp-layer right_sp_layer" data-width="100%">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
                                                            totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
                                                    </div>
                                                </div><!-- End of col-sm-6 -->
                                            </div>
                                        </div><!-- End of col-sm-12 -->
                                    </div>
                                </div>

                                <div class="sp-thumbnails">
                                    <img class="sp-thumbnail" src="assets/images/c1.png"/>
                                    <img class="sp-thumbnail" src="assets/images/c1.png"/>
                                    <img class="sp-thumbnail" src="assets/images/c1.png"/>
                                    <img class="sp-thumbnail" src="assets/images/c1.png"/>
                                </div>
                            </div>
                        </div>
                    </div><!-- End of col-sm-12 -->
                </div><!-- End of row -->
            </div><!-- End of Contaier -->
        </section><!-- End of portfolio Section --> 


        <!-- Contact Section -->
        <section id="contact" class="contact">
            <div class="overlay"></div>
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="main_contact sections">
                            <div class="head_title text-center whitetext">
                                <h1>get in touch</h1>
                            </div><!-- End of head title -->

                            <div class="row">
                                <div class="contact_contant">
                                    <div class="col-sm-6 col-xs-12">
                                        <div class="single_message_right_info whitetext">
                                            <ul>
                                                <li><i class="fa fa-map-marker"></i> <span>23 Mulholland Drive, Suite 721. Los Angeles 10010
                                                        100 S. Main Street. Los Angeles 90012</span></li>

                                                <li><i class="fa fa-mobile-phone"></i> <span>+1-670-567-5590</span></li>

                                                <li><i class="fa fa-envelope-o"></i> <span>hello@clemocreative.com</span></li>
                                            </ul>

                                            <div class="contact_socail transition">
                                                <a href=""><i class="fa fa-facebook img-circle"></i></a>
                                                <a href=""><i class="fa fa-twitter img-circle"></i></a>
                                                <a href=""><i class="fa fa-google-plus img-circle"></i></a>
                                                <a href=""><i class="fa fa-pinterest img-circle"></i></a>
                                                <a href=""><i class="fa fa-instagram img-circle"></i></a>
                                            </div>
                                        </div>
                                    </div><!-- End of col-sm-6 -->

                                    <div class="col-sm-6 col-xs-12">
                                        <div class="single_contant_left margin-top-60">
                                            <form action="#" id="formid">
                                                <!--<div class="col-lg-8 col-md-8 col-sm-10 col-lg-offset-2 col-md-offset-2 col-sm-offset-1">-->

                                                <div class="form-group">
                                                    <label>name</label>
                                                    <input type="text" class="form-control" name="name" required="">
                                                </div>

                                                <div class="form-group">
                                                    <label>e-mail</label>
                                                    <input type="email" class="form-control" name="email" required="">
                                                </div>

                                                <div class="form-group">
                                                    <label>your message</label>
                                                    <textarea class="form-control" name="message" rows="8"></textarea>
                                                </div>

                                                <div class="">
                                                    <input type="submit" value="submit" class="btn btn-default">
                                                </div>
                                                <!--</div>--> 
                                            </form>
                                        </div>
                                    </div>
                                </div> <!-- End of messsage contant-->
                            </div>
                        </div>
                    </div><!-- End of col-sm-12 -->
                </div><!-- End of row -->
            </div><!-- End of Contaier -->
        </section><!-- End of portfolio Section --> 



        <!-- footer Section -->
        <footer id="footer" class="footer">
            <div class="container">
                <div class="main_footer">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="copyright_text text-center">
                                <p class=" wow fadeInRight" data-wow-duration="1s">More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a>2016. All Rights Reserved</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div><!-- End of container -->
        </footer><!-- End of footer -->



        <!-- START SCROLL TO TOP  -->

        <div class="scrollup">
            <a href="#"><i class="fa fa-chevron-up"></i></a>
        </div>

        <script src="assets/js/vendor/jquery-1.11.2.min.js"></script>
        <script src="assets/js/vendor/bootstrap.min.js"></script>

        <script src="assets/js/jquery.easing.1.3.js"></script>
        <script src="assets/js/masonry/masonry.min.js"></script>
        <script type="text/javascript">
            $('.mixcontent').masonry();
        </script>

        <script src="assets/js/jquery.sliderPro.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function ($) {
                $('#example3').sliderPro({
                    width: 960,
                    height: 200,
                    fade: true,
                    arrows: false,
                    buttons: true,
                    fullScreen: false,
                    shuffle: true,
                    smallSize: 500,
                    mediumSize: 1000,
                    largeSize: 3000,
                    thumbnailArrows: true,
                    autoplay: false,
                    thumbnailsContainerSize: 960

                });
            });
        </script>
        <script src="assets/js/plugins.js"></script>
        <script src="assets/js/main.js"></script>

    </body>
</html>
